<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 伪元素注意事项：
    1.伪元素只能给双标签添加 不能给单标签添加
    2.伪元素的冒号前不能有空格 
    3.伪元素里面必须有content:; 
    4.before 和 after创建的元素是行内元素*/


    .box1 {
        width: 400px;
        padding: 10px;
        border: 1px solid black;
    }


    .box1 p {
        width: 50px;
        height: 50px;
        margin-bottom: 10px;
        background-color: skyblue;
    }

    .box1::before {
        content: "0";
        color: red;

    }
</style>

<body>
    <!--伪元素
        1.E::before 在E元素内部的前面插入一个元素 
        2.E::before 在E元素内部的后面插入一个元素
        3.E::first-letter 选择带了E容器的第一个字母 
        （处理文字内容）
        4.E::first-line 选择带了E容器的第一行文本
        （处理文字内容）-->

    <div class="box1">


        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </div>
</body>

</html>